<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="http://cdn.webix.io/edge/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="http://cdn.webix.io/edge/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="./winmenu.css">
		<script type="text/javascript" src="./winmenu.js"></script>

		<title>Win Menu</title>
		<style>
		html, body{
			background: #1d1d1d;
		}
		</style>
	</head>
	<body>
		<div id="areaA" style="width:900px;height:400px; margin:20px;"></div>

	<script type="text/javascript" charset="utf-8">
		var data1 = [
			{ value:"Finance", 		img:"icons/03.png", color:"#008ba0", x:1, y:1, width:2 }, 
			{ value:"Settings", 	img:"icons/06.png", color:"#603cbb", x:1, y:2, width:2 },
			{ value:"People", 		img:"icons/34.png", color:"#d9532c", x:1, y:3, width:2 },
			{ value:"Calendar", 	img:"icons/12.png", color:"#535353", x:3, y:1 },
			{ value:"Store",		img:"icons/18.png", color:"#00a300", x:4, y:1 },
			{ value:"Email", 		img:"icons/20.png", color:"#a400ab", x:3, y:2 },
			{ value:"Music",	 	img:"icons/22.png", color:"#0a57c0", x:4, y:2 },
			{ value:"Photos", 		img:"icons/09.png", color:"#00889e", x:3, y:3, width:2 }
		];

		var data2 = [
			{ value:"Documents", 		img:"icons/24.png", color:"#d9532c", x:1, y:1, width:2 }, 
			{ value:"Games", 		img:"icons/30.png", color:"#008ba0", x:1, y:2 },
			{ value:"Video", 		img:"icons/32.png", color:"#a400ab", x:2, y:2 }
		];

		webix.ready(function(){
			webix.ui({
				container:"areaA", cols:[
					{ 
						view:"winmenu", borderless:true,
						data:data1, gravity:2,
						xCount:4,
						yCount:3,
						on:{ onItemClick:function(id){ webix.message(this.getItem(id).value+" was clicked"); } }
					},
					{ width: 50 },
					{ 
						view:"winmenu", borderless:true,
						data:data2,
						xCount:2,
						yCount:3,
						on:{ onItemClick:function(id){ webix.message(this.getItem(id).value+" was clicked"); } }
					},
				]
			});
		});
		</script>
	</body>
</html>